<template>
    <view class="search_wrap" :style="objColor">
        <!-- homeSub/pages/search/search.wxml -->
        <view class="sticky_view">
            <view class="search">
                <view class="search_box">
                    <!-- 搜索框 -->
                    <view class="weui-search-bar">
                        <view class="weui-search-bar__form">
                            <!-- 点击之后，出现input框 -->
                            <view class="weui-search-bar__box">
                                <view @tap="goLocation" class="weui-icon-search_in-box">
                                    <image class="img1" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/add.png"></image>
                                    <view class="locationName">{{ cityname || '请选择' }}</view>
                                    <image class="img2" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/down.png"></image>
                                </view>
                                <input
                                    type="text"
                                    class="weui-search-bar__input"   
                                    placeholder="请输入站点/地点名称"
                                    :value="searchtxt"
                                    @input="inputTyping"
                                    confirm-type="search"
                                    @confirm="searchclk"
                                />
                                <!-- 输入款字数大于0，则显示清除按钮 -->
                                <view class="weui-icon-clear" v-if="searchtxt.length > 0" @tap="clearInput">
                                    <icon type="clear" size="16"></icon>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="search_txt" @tap="searchclk">搜索</view>
            </view>

            <!-- 站点组件 -->
            <view class="head-nav">
                <view class="selectMenu nav">
                    <picker mode="selector" @change="bindPickerChange" :range="selectMenuOptionsEnum" range-key="label">
                        <view class="uni-input">{{ selectMenuOptionsEnum[selectMenuValue].label }}</view>
                    </picker>
                    <view class="sjx"></view>
                </view>
                
                <view class="all" @tap="goToSite">
                    <image class="allSite" src="https://oos-cn.ctyunapi.cn/front-end/static/static/screening.png"></image>
                    <text>筛选</text>
                </view>
            </view>

            <!-- 筛选组件页面 -->
            <view class="siteLabel_selection">
                <siteLabelSelection ref="siteLabelSelectionRef" @backHome="getInitData"></siteLabelSelection>
            </view>

            <!-- 搜索文字dom -->
            <view class="search_dom" v-if="searchtxtDom">
                <text>以下为“{{ searchtxtDom }}”相关站点</text>
            </view>
        </view>


        <!-- 站点信息 -->
        <view class="site_view">
            <siteListItem :itemData="siteItemData" @myevent="myevent" v-if="siteListShow"></siteListItem>

            <!-- 搜索结果 -->
            <Upgrading v-if="totalCount == 0" text1="暂无相关站点信息" icon="https://oos-cn.ctyunapi.cn/front-end/static/mobileImg/Illustration.png"></Upgrading>
            <view class="no_view" v-if="LoadingComplete">
                <text>没有更多了~</text>
            </view>
        </view>
        
    </view>
</template>

<script>
'use strict';
import siteListItem from '@/components/site-list/site-list-item';
import Upgrading from '@/components/upgrading/upgrading';

import siteLabelSelection from '@/components/siteLabelSelection/siteLabelSelection';


import { indexStationNewV2, indexStationNewV2NoAuth, } from '@/api/mobileUpdate';



export default {
    // 点击返回按钮
    onBackPress(options) {
		console.log('onBackPress==>from:' + options.from)
        if (options.from === 'navigateBack') {
            return false
        }
        uni.navigateBack({
            delta: 2
        })
        return true
	},
    onUnload() {
        // 为兼容小程序的 onBackPress 所以写了这个
        //#ifdef MP-WEIXIN
        uni.navigateBack({
            delta: 2
        })
        //#endif
    },

    components: {
        siteListItem,
        Upgrading,
        siteLabelSelection,
    },
    // 生命周期函数--监听页面加载
    data() {
        return {
            selectMenuValue: 0,
            selectMenuValueNum: 3,
            selectMenuOptionsEnum:[
                {
                    label: '综合排序',
                    value: 3,
                }, 
                {
                    label: '距离最优',
                    value: 0,
                }, 
                {
                    label: '价格最优',
                    value: 1,
                }, 
                {
                    label: '空闲最多',
                    value: 2,
                }, 
            ],

            bar_Height: uni.getSystemInfoSync().statusBarHeight,
			widnowH: uni.getSystemInfoSync().screenHeight,

            searchtxt: '',
            searchtxtDom: '',
            cityname: '城市',

            siteListShow: true,
            //站点组件
            siteItemData: {
                list: []
            },
            page: 1,
            pageSize: 10,
			pages: 2,  
            totalCount: 0,
            LoadingComplete: false,
        };
    },
    onLoad: function (option) {
        console.log(option,'看看传过来的值')
        this.searchtxtDom = option.searchVal
        this.searchtxt = this.searchtxtDom

        uni.hideLoading(); // 城市
    },
    // 生命周期函数--监听页面显示
    onShow: function () {   
        this.citynameFun();

        // uni.removeStorageSync('siteLabelSelection')
        // uni.removeStorageSync('siteFiltering')

        let getMemberQueryPreferenceDto = uni.getStorageSync('siteFiltering')
        console.log('getMemberQueryPreferenceDto===>index', getMemberQueryPreferenceDto)
        this.$refs.siteLabelSelectionRef.getIndexSearchCondition()

        // 解决缓存里还没去取到的情况;
        setTimeout(() =>{
            this.getInitData()
        },600)
        // this.getInitData()
    },
    methods: {
        bindPickerChange: function(e) {
            // '综合排序',3
            // 	'距离最优',0
            // 	'价格最优',1
            // 	'空闲最多',2
            console.log('picker发送选择改变，携带值为', e.detail.value)
            this.selectMenuValue = e.detail.value

            if(this.selectMenuValue == 0){
                this.selectMenuValueNum = 3
            }else if(this.selectMenuValue == 1){
                this.selectMenuValueNum = 0
            }else if(this.selectMenuValue == 2){
                this.selectMenuValueNum = 1
            }else if(this.selectMenuValue == 3){
                this.selectMenuValueNum = 2
            }
            
            this.getInitData()
        },
        
        // 获取站点数据 默认将当前页改为1
        getInitData: function() {
            console.log(uni.getStorageSync('siteLabelSelection'),"getInitData===>siteLabelSelection....")
            console.log(uni.getStorageSync('siteFiltering'),"getInitData===>siteFiltering....")

            this.page = 1
            this.getIndexStationNewV2('replace')
        },

        //查看全部站点
        goToSite: function() {
            uni.navigateTo({
                url: '/pages/siteFiltering/siteFiltering'
            });
        },


        //城市
        citynameFun: function () {
            this.cityname = uni.getStorageSync('cityName') ? uni.getStorageSync('cityName'): uni.getStorageSync('currentCityName')
        },

        //定位
        goLocation: function () {
            uni.navigateTo({
                url: '../area/area'
            });
        },


        clearInput: function () {
            this.searchtxt= ''
        },

        inputTyping: function (e) {
            //搜索数据
            this.searchtxt=e.detail.value
        },

        // 搜索 获取站点
        searchclk: function () { 
			console.log(this.searchtxt);
            this.getInitData()

            this.searchtxtDom = this.searchtxt
        },
        myevent: function(e) {
            console.log(e,'eeee');
            var data = e.detail;
            this.siteItemData = data;
        },
        // 获取站点列表v2
        getIndexStationNewV2: function (type) {
            console.log(type,'typeeee')
            uni.showLoading({
                title: '加载中'
            });
            var that = this;
            let siteFiltering = uni.getStorageSync('siteFiltering');
            let siteLabelSelection = uni.getStorageSync('siteLabelSelection');
            let tagFilter = {
                ...siteFiltering,
                ...siteLabelSelection
            }
            if(siteFiltering.gunType && siteLabelSelection.gunType){
                tagFilter.gunType = [...siteFiltering.gunType, ...siteLabelSelection.gunType]
            }
            if(siteFiltering.serviceFacilities && siteLabelSelection.serviceFacilities){
                tagFilter.serviceFacilities = [...siteFiltering.serviceFacilities, ...siteLabelSelection.serviceFacilities]
            }
            console.log(tagFilter,'siteListNew==>>tagFilter.....')
            let datas = {
                "sellerId": getApp().globalData.sellerId,
                "areaId": uni.getStorageSync('cityId'),
                "latitude": uni.getStorageSync('latitude'),
                "longitude": uni.getStorageSync('longitude'),
                "current": this.page,
                "pageSize": this.pageSize,
                "keyword": this.searchtxt,
                "sortMode": this.selectMenuValueNum,
                "isCollect": false,
                ...tagFilter,
            }
            console.log(datas,'searchNew站点筛选条件.....');

            let getApiUrl = uni.getStorageSync('token') ? indexStationNewV2 : indexStationNewV2NoAuth
				getApiUrl({...datas}).then(res=>{
                console.log(res,'站点列表v2')
                console.log(res,'站点==>stationData*********');
                uni.hideLoading()
                if (res.code == 0) {
                    that.setData({
                        page: res.data.pageNo,
                        pages: res.data.pages,
                        totalCount: res.data.totalCount,
                    });

                    if (res.data.pageNo == res.data.pages) {
                        that.setData({
                            LoadingComplete: true
                        });
                    } else {
                        that.setData({
                            LoadingComplete: false
                        });
                    }

                    var list = res.data.data || []; // 没有数据不操作

                    if (list.length == 0 && res.data.pageNo == 1) {
                        that.setData({
                            'siteItemData.list': [],
                        });
                        return false;
                    }

                    if (type === 'replace') {
                        that.setData({
                            'siteItemData.list': list,
                        });
                    } else {
                        that.setData({
                            'siteItemData.list': that.siteItemData.list.concat(list),
                        });
                    }

                } else {
                    that.siteItemData.list = []

                    that.totalCount = 0
                }
            })
        },
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        this.siteListShow = false;

        this.setData({
            page: 1,
            pages: 1,
            'siteItemData.list': []
        });
        this.getIndexStationNewV2('replace')
        this.siteListShow = true
        
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 1500);
    },
    //  * 页面上拉触底事件的处理函数
    onReachBottom: function () {
        let page = this.page + 1;

        if (this.page < this.pages) {
            this.setData({
                page
            });
            this.getIndexStationNewV2('');
        }
    },
};
</script>
<style lang="less" scoped>
@import "./siteListNew.less";
@import "../../commin/commin.less";

page {
    background-color: #F5F7FA;
}
.search_wrap {
	// background-color: #F5F7FA;
	min-height: 100vh;
}

.search {
    // position: fixed;
    // width: 100%;
    // top:0;
    // z-index: 99;
    display: flex;
    background-color: @white-color;
    align-items: center;
    .paddings(17rpx, 33rpx, 24rpx, 26rpx);

    .search_box {
        .kuangao(610rpx, 70rpx);
    }

    .weui-search-bar {
        display: flex;
    }

    .weui-icon-search {
        margin-right: 8px;
        font-size: inherit;
    }

    .weui-icon-search_in-box {
        position: absolute;
        left: 0rpx;
        top: 12rpx;
        display: flex;
        align-items: center;

        .locationName {
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color2;
            margin: -5rpx 8rpx;
            width: 100rpx;
            overflow: hidden; //溢出隐藏
            white-space: nowrap; //禁止换行
            text-overflow: ellipsis; //...
        }

        .img1 {
            .kuangao(23rpx, 30rpx);
        }

        .img2 {
            .kuangao(25rpx, 25rpx);
        }
    }

    .weui-search-bar__text {
        display: inline-block;
        font-size: 14px;
        vertical-align: middle;
    }

    .weui-search-bar__form {
        flex: auto;
        background: #F5F7FA;
        border-radius: 35rpx;
        .paddings(10rpx, 10rpx, 10rpx, 33rpx);
    }

    .weui-search-bar__box {
        position: relative;
        padding-left: 30px;
        padding-right: 30px;
        width: 100%;
        box-sizing: border-box;
        z-index: 1;
    }

    .weui-search-bar__input {
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        margin-left: 110rpx;
        width: 340rpx;
        overflow: hidden; //溢出隐藏
        white-space: nowrap; //禁止换行
        text-overflow: ellipsis; //...
    }

    .weui-icon-clear {
        position: absolute;
        top: 0;
        right: 0;
        padding: 7px 8px;
        font-size: 0;
    }

    .weui-search-bar__label {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        border-radius: 3rpx;
        text-align: center;
        color: #9B9B9B;
        background: #FFFFFF;
        line-height: 28px;
    }

    .weui-search-bar__cancel-btn {
        margin-left: 10px;
        line-height: 28px;
        color: #09BB07;
        white-space: nowrap;
        font-size: 30rpx;
    }

    .img {
        width: 44rpx;
        height: 44rpx;
        margin-top: 36rpx;
    }

    .tipInfo {
        .kuangao(14rpx, 14rpx);
        .position(absolute, 20rpx, 34rpx, 0, auto);
        .borderradius(7rpx, 7rpx, 7rpx, 7rpx);
        background: @orange;
    }

    .search_txt {
        .fontsize(30rpx);
        font-family: PingFang SC;
        font-weight: bold;
        color: @blue;
        margin-left: 23rpx;
    }
}





</style>
